<template>
    <div class="shopcart-container">
        <!-- 收货地址区域 -->
        <van-cell
            class="address-container"
            :title="address.name"
            :value="address.tel"
            :label="address.city + address.county + address.address_detail"
            :to="{ name: 'address_select' }"
        />

        <!-- 商品列表 -->
        <van-card
            v-for="item in goodsList"
            :key="item.id"
            :num="item.count"
            :price="item.price"
            :title="item.goods_name"
            :desc="item.goods_desc"
            :thumb="APIDomainName + item.goods_img"
        />

        <!-- 配送信息 -->
        <van-cell
            title="配送服务"
            label="快递运输,工作日、双休日与节假日均可送货"
        />

        <van-field
            v-model="note"
            rows="2"
            autosize
            label="订单备注"
            type="textarea"
            placeholder="请输入订单备注"
        />
        *

        <!-- 运费信息 -->
        <van-cell title="商品金额" :value="`¥${amount.toFixed(2)}`"/>
        <van-cell title="运费" :value="`¥0.00`"/>
        <van-cell title="总价" :value="`¥${amount.toFixed(2)}`"/>
        <!-- 创建订单按钮 -->
        <van-button @click="OnClickCreateOrder" size="large" type="primary">创建订单</van-button>
    </div>
</template>

<script>
import {Card, Button, Cell, Field} from "vant";
import {createOrder} from "@/api/order.js";
import {getDefaultAddress} from "@/api/address.js";
import {getCartListChecked} from "@/api/cart.js";

export default {
    components: {
        [Card.name]: Card,
        [Button.name]: Button,
        [Cell.name]: Cell,
        [Field.name]: Field,
    },
    data() {
        return {
            goodsList: [],
            amount: 0,
            note: "",
            address: {},
            showPay: false
        };
    },
    created() {
        if (this.$route.params.addressId) {
            //通过路由名 address_select 转来的
            this.address.id = this.$route.params.addressId;
        }
        this.getDefaultAddress();
        this.getCartListByChecked();
    },
    methods: {
        async getCartListByChecked() {
            try {
                let result = await getCartListChecked();
                //console.log(result)
                if (result.code == 1) {
                    this.goodsList = result.data;
                    this.amount = 0;
                    this.goodsList.forEach((item) => {
                        this.amount += item.count * item.price;
                    });
                } else if (result.code == 2) {
                    //需要用户登录的
                    this.$router.push({name: "login"});
                } else {
                    throw result.msg;
                }
            } catch (error) {
                this.$dialog.alert({title: "错误", message: error});
            }
        }, //===================================================

        async getDefaultAddress() {
            try {
                let params = {id: this.address.id};
                let result = await getDefaultAddress(params);

                if (result.code == 1) {
                    if (result.data.length == 1) {
                        this.address = result.data[0];
                    } else {
                        this.$toast("请先添加收货地址");
                        this.$router.replace({name: "address_select"});
                    }
                } else if (result.code == 2) {
                    //需要用户登录的
                    this.$router.push({name: "login"});
                } else {
                    throw result.msg;
                }
            } catch (error) {
                this.$dialog.alert({title: "错误", message: error});
            }
        }, //===================================================

        async OnClickCreateOrder() {
            try {
                let goods = [];
                this.goodsList.forEach((item) =>
                    goods.push({
                        id: item.goods_id,
                        count: item.count,
                        price: item.price,
                    })
                );
                let params = {
                    address: this.address,
                    amount: this.amount,
                    goodsList: goods,
                    note: this.note,
                };
                // console.log(params)
                let result = await createOrder(params);
                // console.log(result)
                if (result.code == 1) {
                    this.$toast(result.msg);
                    this.$router.push({
                        name: "orderPay",
                        params: {order: {id: result.data, amount: this.amount, goods: this.goodsList}}
                    })
                } else if (result.code == 2) {
                    this.$router.push({name: "login"});
                } else {
                    throw result.msg;
                }
            } catch (error) {
                this.$dialog.alert({title: "错误", message: error});
            }
        },
        pay() {
            console.log("付款中...")
        },
        popupPay() {
            this.showPay = true
        }
    },
};
</script>

<style lang="less" scoped>
.shopcart-container {
    display: flex;
    flex-direction: column;
    background: #eee;
    overflow: hidden;
    // 收货地址
    .address-container {
        background-color: rgb(218, 240, 240);
        margin: 0;
        padding: 10px;
    }
}

.van-card__title {
    font-size: 16px;
}
</style>
